<!--
 * @Author: your name
 * @Date: 2021-11-19 21:19:33
 * @LastEditTime: 2021-12-03 18:18:33
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jf-nlitc\src\views\Home\xmxz\index.vue
-->
<template>
  <div class="xz">
    <!-- <Xmxz /> -->
    <!-- <Rixmxz /> -->

    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInLeft"
      leave-active-class="animated fadeOutLeft"
    >
      <Xmxz v-show="IsShowXmxz" />
    </transition>

    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInRight"
      leave-active-class="animated fadeOutRight"
    >
      <Rixmxz v-show="IsShowXmxz" />
    </transition>
    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInRight"
      leave-active-class="animated fadeOutRight"
    >
      <div v-if="tuliData && tuliData.length > 0" class="tuli" id="TuLi">
        <Tuli />
      </div>
    </transition>

    <!-- <button class="ShowPanelBtn" >面板</button> -->
    <div @click="ShowPanel" class="ShowPanelBtn">
      <!-- spin="true" rotate="90" -->
      <a-icon
        :style="{ fontSize: '30px', color: '#fff' }"
        type="fullscreen-exit"
        v-if="IsShowXmxz"
      />
      <a-icon
        :style="{ fontSize: '30px', color: '#fff' }"
        type="fullscreen"
        v-if="!IsShowXmxz"
      />
    </div>
    <Bounce v-if="IsShowBoune" />
    <router-view />
  </div>
</template>

<script>
import Xmxz from "./left/xmxz.vue";
import Bounce from "./bounced/Bounce.vue";

import Rixmxz from "./right/rixmxz.vue";
import { mapState, mapMutations } from "vuex";
import Tuli from "./right/tuli.vue";

export default {
  data() {
    return {
      // IsShowBoune: false,
    };
  },
  computed: {
    ...mapState("Sjsx", ["tuliData", "IsShowXmxz", "IsShowBoune"]),
  },
  watch: {},
  methods: {
    // BouneClick() {
    //     if (this.IsShowXmxz == true) {
    //         this.IsShowBoune = true

    //     } else {
    //         this.IsShowBoune = false

    //     }
    //     console.log(1111111111);
    // },
    ...mapMutations("Sjsx", ["setIsShowXmxz"]),
    ShowPanel() {
      this.setIsShowXmxz();
      //   console.log(this.IsShowXmxz,"this.IsShowXmxz的值");
      const el = document.getElementById("TuLi");
      if (this.IsShowXmxz == false && this.tuliData) {
        console.log("图例收到最右侧");
        // console.log(el.style.width,"el.width");
        el.className = "tuli fadeout";
        el.style.left = "85%";
      } else if (this.IsShowXmxz == true && this.tuliData) {
        console.log("图例回到原来位置");
        el.className = "tuli fadein";
        el.style.left = "63.4%";
      }
    },

    // // 改变图例的位置
    // changeTuliPosition() {
    // 	console.log(this.IsShowXmxz,"this.IsShowXmxz的值");
    // //   if (this.IsShowXmxz == true) {
    // //     console.log("图例在中间");
    // //   } else {
    // //     console.log("图例在右边");
    // //   }
    // },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {
    Xmxz,
    Rixmxz,
    Tuli,
    Bounce,
  },
};
</script>

<style lang="scss" scoped>
.xz {
  // position: relative;
  .tuli {
    position: absolute;
    width: 250px;
    // height: 350px;
    min-height: 100px;
    left: 63.4%;
    bottom: 2.7%;
  }
  .fadeout {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    opacity: 1;
  }
  .fadein {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    opacity: 1;
  }

  .ShowPanelBtn {
    position: absolute;
    left: 20px;
    top: 10%;
    cursor: pointer;
  }
}
</style>
